<template>
  <div class="fenleiguanli">
    <top v-if="!hide"></top>
    <div class="flex zhiboxitong_content">
      <div class="left" v-if="!hide">
        <left></left>
      </div>
      <div class="right">
        <div class="zhiboxitong_right">
          <div class="flex btn_class">
            <el-button type="danger" size="medium" @click="tianjia()" style="background:#F72C6A; border-radius: 10px;">添加分类</el-button>
          </div>
          <div class="zhiboxitong_table">
            <div class="flexc" style="text-align: left;">
              <div style="flex: 1;height:70px;line-height:70px;padding-left: 10px;
              box-sizing: border-box;
              ">ID</div>
              <div style="flex: 1;height:70px;line-height:70px">分类名称</div>
              <div style="flex: 1;height:70px;line-height:70px">创建时间</div>
              <div style="flex: 1;height:70px;line-height:70px">操作</div>
            </div>
            <Draggable v-model="list" @start="onDragStart" @end="onDragEnd">
              <div
                class="flexc table_hover"
                v-for="(item, index) in list"
                :key="index"
                style="margin-bottom: 10px; text-align: left;height:70px"
              >
                <div style="flex: 1; hover_bgd;height:70px;line-height:70px;padding-left: 10px;box-sizing: border-box;">{{item.id}}</div>
                <div style="flex: 1; hover_bgd;height:70px;line-height:70px">{{item.name}}</div>
                <div style="flex: 1; hover_bgd;height:70px;line-height:70px">{{item.created_at}}</div>
                <div
                  class="hover_bgd"
                  style="flex: 1;display: flex;
                         justify-content: flex-start;
                         "
                >
                  <el-button size="mini" type="text" @click="bianji(item)" style="color:#005AFF;font-size:14px">编辑</el-button>
                  <el-button size="mini" type="text" @click="shanchu(item.id)" style="color:#005AFF;margin-left:30px;font-size:14px">删除</el-button>
                  <!-- <i class="el-icon-top" v-if="index!=0" @click="moveUp(item, index)"></i> -->
                  <img src="../../static/img/up.png" class="img_up" v-if="index!=0" @click="moveUp(item, index)"/>
                </div>
              </div>
            </Draggable>
            <!-- <div class="flexc" v-for="(item, index) in list" :key="index" draggable="true" style="padding: 10px; border: 1px #ccc solid; margin-bottom: 10px; text-align: center;" @dragend="dragEnd" @dragstart="dragStart(index, $event)" @dragover.prevent="dragOver($event)" @dragenter.prevent="dragEnter($event)">
              <div style="flex: 1;">{{item.id}}</div>
              <div style="flex: 1;">{{item.name}}</div>
              <div style="flex: 1;">{{item.created_at}}</div>
              <div style="flex: 1;">
                <el-button size="mini" type="text" @click="bianji(scope.row)">编辑</el-button>
                <el-button size="mini" type="text" @click="shanchu(scope.row.id)">删除</el-button>
              </div>
            </div>-->

            <!-- <el-table :data="list" border style="width: 100%" align="center">
              <el-table-column prop='id' label="ID"></el-table-column>
              <el-table-column prop='name' label="分类名称"></el-table-column>
              <el-table-column prop='created_at' label="创建时间"></el-table-column>
              <el-table-column label="操作" >
                <template slot-scope="scope">
                  <el-button size="mini" type="text" @click="bianji(scope.row)">编辑</el-button>
                  <el-button size="mini" type="text" @click="shanchu(scope.row.id)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>-->
            <div style="text-align: right; padding: 10px 0;">
              <el-pagination
                background
                layout="total,prev, pager, next"
                :current-page="all.page"
                @current-change="fanye"
                :page-size="all.page_size"
                :total="total"
              ></el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>

    <el-dialog
      title="编辑分类"
      :visible.sync="log"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      width="700px"
    >
      <div class="flexc">
        <div style="margin-right: 20px;">分类名称：</div>
        <el-input v-model="fenleiall.name" style="width: 220px;" placeholder="请输入分类名称"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="log = false" style="border-radius:12px;background:white;border:1px solid #ccc;color:black">取消</el-button>
        <el-button type="primary" @click="tongbugo" :disabled="tongbugoing" style="border-radius:12px;background:#3158F1;color:white;border:none">确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import top from "./components/top.vue";
import left from "./components/left.vue";

import Draggable from "vuedraggable";
export default {
  components: {
    top,
    left,
    Draggable
  },
  name: "fenleiguanli",
  props: {
    hide: false
  },
  // watch: {}
  data() {
    return {
      list: [],
      list2: [],
      log: false,
      tongbugoing: false,

      all: {
        page: 1,
        page_size: 20
      },

      fenleiall: {
        name: "",
        id: ""
      }
    };
  },
  created() {
    this.getlist();
  },
  mounted() {},
  methods: {
    moveUp(item, index) {
      if (index === 0) return;
       axios.post(`${this.apis}/api/catgory/sort/move`, {
        move_cat_id: this.list[index].id,
        replace_cat_id: this.list[index - 1].id
      }).then(response => {
        if (response.data.msg.code === 0) {
          // 请求成功，更新本地数据
          const temp = this.list[index];
          this.list.splice(index, 1, this.list[index - 1]);
          this.list.splice(index - 1, 1, temp);

          this.$message.success("操作成功");
        } else {
          this.$message.error(response.data.msg.info);
        }
      }).catch(error => {
        this.$message.error("请求失败，请稍后再试");
      });
      // let temp = this.list[index];
      // this.list.splice(index, 1, this.list[index - 1]);
      // this.list.splice(index - 1, 1, temp);
    },
    onDragStart(event) {
      console.log(event);
      // 拖动开始时触发
      // const draggedItem = event.draggedContext.element;
      // console.log('Start dragging:', draggedItem);
    },
    onDragEnd(event) {
      console.log(event);
      console.log(event.oldIndex);
      console.log(event.newIndex);
      if (event.oldIndex < event.newIndex) {
        axios
          .post(`${this.apis}/api/catgory/sort/move`, {
            move_cat_id: this.list2[event.oldIndex].id,
            replace_cat_id: this.list2[event.newIndex + 1].id
          })
          .then(response => {
            if (response.data.msg.code == 0) {
              this.getlist();
              this.$message.success("操作成功");
            } else {
              this.$message.error(response.data.msg.info);
            }
          });
      }

      if (event.oldIndex > event.newIndex) {
        axios
          .post(`${this.apis}/api/catgory/sort/move`, {
            move_cat_id: this.list2[event.oldIndex].id,
            replace_cat_id: this.list[event.newIndex + 1].id
          })
          .then(response => {
            if (response.data.msg.code == 0) {
              this.getlist();
              this.$message.success("操作成功");
            } else {
              this.$message.error(response.data.msg.info);
            }
          });
      }

      // 拖动结束时触发
      // const draggedItem = event.draggedContext.element;
      // console.log('End dragging:', draggedItem);
    },
    // dragStart(index, event) {
    //   this.draggedIndex = index;
    //   this.draggedItem = this.items[index];
    // },
    // dragOver(event) {
    //   event.target.style.border = "1px dashed #000";
    // },
    // dragEnter(event) {
    //   event.target.style.border = "1px dashed #000";
    // },
    // dragEnd(event) {
    //   const draggedEl = event.target;
    //   const dropZone = draggedEl.parentNode;

    //   dropZone.style.border = "";

    //   // Move the item in the array
    //   this.items.splice(this.draggedIndex, 1);
    //   this.items.splice(this.hoveredOverIndex, 0, this.draggedItem);
    // },
    tongbugo: function() {
      this.tongbugoing = true;
      axios
        .post(`${this.apis}/api/catgory/set`, this.fenleiall)
        .then(response => {
          if (response.data.msg.code == 0) {
            this.getlist();
            this.$message.success("操作成功");
            this.log = false;
            setTimeout(() => {
              this.tongbugoing = false;
            }, 500);
          } else {
            this.$message.error(response.data.msg.info);
            this.tongbugoing = false;
          }
        });
    },

    shanchu: function(id) {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        axios
          .post(`${this.apis}/api/catgory/delete`, { id: id })
          .then(response => {
            if (response.data.msg.code == 0) {
              this.getlist();
              this.$message.success("已删除");
            } else {
              this.$message.error(response.data.msg.info);
            }
          });
      });
    },
    fanye: function(page) {
      this.all.page = page;
      this.getlist();
    },

    getlist: function() {
      axios
        .get(`${this.apis}/api/catgory/list`, { params: this.all })
        .then(response => {
          if (response.data.msg.code == 0) {
            this.list = response.data.data;
            this.list2 = response.data.data;
            this.$emit('getfenleilist',this.list)
          } else {
            this.$message.error(response.data.msg.info);
          }
        });
    },
    tianjia: function() {
      this.fenleiall = {
        name: "",
        id: ""
      };
      this.log = true;
    },
    bianji: function(item) {
      this.fenleiall = JSON.parse(JSON.stringify(item));
      this.log = true;
    }
  }
};
</script>

<style scoped lang="less">
  /deep/ .el-dialog{
    border-radius:20px;
  }
  /deep/ .el-dialog__title {
    font-size: 20px;
    font-weight: bold; /* 修改标题字体大小 */
  }
  /deep/ .el-input__inner {
  border-radius: 12px;
}
.btn_class{
  display: flex;
  margin-left: 20px;  margin-top: 20px; margin-bottom: 20px;
  justify-content: flex-start;
}
.img_up {
  cursor: pointer;
  // font-size: 16px;
  margin-left: 40px;
  margin-top: 5px;
  width: 20px;
  height: 20px;
  display: none;
}
.fenleiguanli {
  // background: red;
  // min-height: 100vh;
  /deep/ .el-breadcrumb {
    font-size: 16px;
  }
  * {
    box-sizing: border-box;
  }

  .sortable-chosen {
    background: #eaeaea;
  }

  .zhiboxitong_content {
    // height: calc(100vh - 70px);
    .left {
      width: 210px;
      background: #3a3e4b;
      height: 100%;
      // position: fixed;

    }
    .right {
      width: calc(100vw - 220px);
      height: 100vh;
      overflow: auto;
      // padding: 10px;
      .zhiboxitong_right {
        // height: calc(100vh - 90px);
        // overflow: auto;
        border-radius: 5px;
        padding: 20px;
      }
      .zhiboxitong_table {
        // margin-top: 20px;
        background: #F8F9FD;
        border-top-left-radius: 30px;
        padding: 30px;
      }
    }
  }

  .flex {
    display: flex;
    flex-wrap: wrap;
  }

  .flexb {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .flexc {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  .flexbc {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
  }

  .flexcc {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }
}
.el-icon-top {
  display: none;
}
.table_hover:hover {
   background: white;
   border-radius: 20px;
  .img_up {
    display: block;
  }
}
</style>
